import React, { Component } from 'react'

export default class Hello extends Component {
  componentWillReceiveProps (nextProps) {
    /**
     * 接受最新的那个属性
     * 监听属性是否改变
     * 场景:  
     *     - 路由改变 , 头部 ,底部 发生对应的变化  
     *      
     */
    console.log('hello-componentWillReceiveProps', nextProps)
  }
  shouldComponentUpdate (nextProps, nextState) {
    console.log('shouldComponentUpdate')
    /**
     * 决定组件是否更新
     * 它是返回一个布尔值,值为true更新  为false不更新
     * 性能优化
     *     可以决定组件是否渲染
     * 浅对比
     */
    return true
  }
  render () {
    /**
     * 初始化阶段会执行一次
     * 更新阶段也会执行一次 
     *      解析this.state和this.props
     *      再次生成vdom 
     */
    console.log('render')
    const { count } = this.props
    return (
      <div>
        <p>
          父组件传递过来的数据:{count}
        </p>
      </div>
    )
  }
  componentDidUpdate () {
    /**
     *  通过filber算法来对比两次Vdom 生成patch补丁对象
     *  根据补丁对象生成真实dom,替换原有节点
     *  功能和componentDidMont一样
     *      * 真实dom操作 
     */
    console.log('componentDidUpdate')
    document.querySelector('p').style.background = 'red'
  }
}
